<template>
    <div class="content">
        <div id="cart-title">
            注册
        </div>
        <p class="account-title">成为Stage用户</p>
        <br>
        <div class="change-user-info">
            <el-form :model="ruleForm2"
                     :rules="rules2"
                     ref="ruleForm2"
                     label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="账号"
                              prop="account"
                              required>
                    <el-input v-model="ruleForm2.account"></el-input>
                </el-form-item>
                <el-form-item label="密码"
                              prop="pass">
                    <el-input type="password"
                              v-model="ruleForm2.pass"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码"
                              prop="checkPass">
                    <el-input type="password"
                              v-model="ruleForm2.checkPass"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称"
                              prop="nickName"
                              required>
                    <el-input v-model="ruleForm2.nickName"></el-input>
                </el-form-item>
                <el-form-item label="性别"
                              prop="gender">
                    <el-select v-model="ruleForm2.gender"
                               placeholder="请选择性别">
                        <el-option label="男"
                                   value="true"></el-option>
                        <el-option label="女"
                                   value="false"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="生日"
                              required>
                    <el-form-item prop="birthday">
                        <el-date-picker type="date"
                                        placeholder="选择日期"
                                        v-model="ruleForm2.birthday"
                                        style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="手机"
                              prop="phoneNumber"
                              required>
                    <el-input v-model="ruleForm2.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="邮箱"
                              prop="email"
                              required>
                    <el-input v-model="ruleForm2.email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               @click="submitForm('ruleForm2')">注册</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm2.checkPass !== '') {
                    this.$refs.ruleForm2.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm2.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var checkPhoneNumber = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入联系电话 '));
            } else {
                callback();
            }
        };
        var checkNickName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入昵称'));
            } else {
                callback();
            }
        };
        var checkAccount = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入账号'));
            } else {
                callback();
            }
        };
        return {
            ruleForm2: {
                pass: '',
                checkPass: '',
                account: '',
                nickName: '',
                gender: '',
                birthday: '',
                phoneNumber: '',
                email: ''
            },
            rules2: {
                account: [{ validator: checkAccount, trigger: 'blur' }
                ],
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                birthday: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                nickName: [
                    { validator: checkNickName, trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                phoneNumber: [
                    { validator: checkPhoneNumber, trigger: 'blur' }
                ]
                ,
                email: [
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            var _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    $.ajax({
                        type: "Options",
                        url: "/api/User/ClientRegister",
                        data: {
                            Account: _this.ruleForm2.account,
                            Password: _this.ruleForm2.pass,
                            NickName: _this.ruleForm2.nickName,
                            Gender: _this.ruleForm2.gender,
                            Birthday: _this.ruleForm2.birthday,
                            PhoneNumber: _this.ruleForm2.phoneNumber,
                            Email: _this.ruleForm2.email
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data != null) {
                                _this.Success("注册成功");
                                window.location.href = 'http://localhost:60861/#/Login';

                            } else {
                                _this.Failed("注册失败，请核对登录信息")
                            }

                        },
                        error: function (msg) {
                            _this.Failed("系统故障")
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        Success(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'success'
            });
        },
        Failed(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'error'
            });
        }
    }
}
</script>
 